@page "/read/{id:guid}"
@inherits ImportantComponentBase

@if (ShowAppBar)
{
    <MyAppBar>
        <MButton Icon="true"
                 OnClick="NavigateToBack">
            <MIcon>
                arrow_back
            </MIcon>
        </MButton>

        <MSpacer></MSpacer>
        <MButton Icon="true"
                 OnClick="()=>showShare=true">
            <MIcon>
                share
            </MIcon>
        </MButton>
        <MButton Icon="true"
                 OnClick="OpenDeleteDialog">
            <MIcon>
                mdi:mdi-delete-outline
            </MIcon>
        </MButton>
        <MButton Icon="true"
                 OnClick="ToWrite">
            <MIcon>
                mdi:mdi-pencil
            </MIcon>
        </MButton>

        <MultiMenu @bind-Visible="showMenu"
                   DynamicListItems="menuItems">
            <ActivatorContent>
                <MButton @attributes="@context.Attrs"
                         Icon="true">
                    <MultiDisplay>
                        <DesktopContent>
                            <MIcon>more_horiz</MIcon>
                        </DesktopContent>
                        <MobileContent>
                            <MIcon>more_vert</MIcon>
                        </MobileContent>
                    </MultiDisplay>
                </MButton>
            </ActivatorContent>
        </MultiMenu>
    </MyAppBar>
}

<HighlightSearchTextField @bind-Visible="showHighlightSearch"
                          @bind-Value="@search"
                          Selector="@($".{highlightSearchContainerClass}")"
                          Autofocus="highlightSearchAutofocus">
</HighlightSearchTextField>

<ScrollContainer Id="@scrollContainerId"
                 ContentClass="pb-5"
                 ContentStyle="padding-top:0px;">
    <div class="@screenshotClass">
        <div class="d-flex align-center px-3 flex-wrap">
            @if (diaryTimeFormat?.Contains("yyyy/MM/dd") ?? false)
            {
                <span class="text-h6 font-weight-bold mr-3">
                    @(diary.CreateTime.ToString("yyyy/MM/dd"))
                </span>
            }
            
            @if (diaryTimeFormat?.Contains("HH:mm") ?? false)
            {
                <span class="font-weight-bold mr-5">
                    @(diary.CreateTime.ToString("HH:mm"))
                </span>
            }
            
            @if (diaryTimeFormat?.Contains("dddd") ?? false)
            {
                <span class="text-subtitle-2">
                    @(I18n.ToWeek(diary.CreateTime))
                </span>
            }
            
            <MSpacer></MSpacer>

            <span class="text-subtitle-2">
                @(CounterValue())
            </span>
        </div>

        <div>
            @if (ShowWeather)
            {
                <DiaryInfoButton Icon="@WeatherIcon"
                                 Text="@WeatherText">
                </DiaryInfoButton>
            }

            @if (ShowMood)
            {
                <DiaryInfoButton Icon="@MoodIcon"
                                 Text="@MoodText">
                </DiaryInfoButton>
            }

            @if (ShowLocation)
            {
                <DiaryInfoButton Icon="location_on"
                                 Text="@LocationText">
                </DiaryInfoButton>
            }
        </div>

        @if (ShowTitle)
        {
            <MTextField Value="@(diary.Title)"
                        TValue="string"
                        Class="pb-0 my-sm-4 user-select font-weight-bold"
                        Solo="true"
                        Flat="true"
                        BackgroundColor="transparent"
                        HideDetails="@("auto")"
                        Dense="true"
                        Readonly="true"
                        maxlength="20">
            </MTextField>
        }

        <div class="my-sm-3 user-select" @ondblclick="ToWrite">
            @if (enableMarkdown)
            {
                <MarkdownPreview @ref="markdownPreview"
                                 @bind-MobileOutline="showMoblieOutline"
                                 Value="@(diary.Content)"
                                 Class="@($"px-3 {highlightSearchContainerClass}")"
                                 Style="padding-top:10px"
                                 FirstLineIndent="firstLineIndent"
                                 TaskListLineThrough="taskListLineThrough"
                                 Outline="outline"
                                 RightOutline="rightOutline"
                                 OnAfter="HandleFirstQuery">
                </MarkdownPreview>
            }
            else
            {
                <div class="@($"text-preview {highlightSearchContainerClass}")">
                    @(diary.Content)
                </div>
            }
        </div>

        <div class="pl-2">
            <MChipGroup Column="true">
                @foreach (var item in Tags)
                {
                    <MChip @key="item.Id"
                           IsActive="false"
                           Href="@($"tagDetails/{item.Id}")">
                        @(item.Name)
                    </MChip>
                }
            </MChipGroup>
        </div>
    </div>
</ScrollContainer>

<div class="right-bottom-float-area">
    <BackTopButton Selector="@scrollContainerSelector">
    </BackTopButton>
</div>

<MultiListDialog @bind-Visible="showShare"
                 Title="@(I18n.T("Choose how to Share"))"
                 DynamicListItems="shareItems">
</MultiListDialog>

<DeleteDialog @bind-Visible="showDelete"
              Title="@(I18n.T("Delete a diary"))"
              Content="@(I18n.T("Please delete carefully, every diary is a precious memory.Once deleted, it cannot be restored."))"
              OnOK="HandleDelete">
</DeleteDialog>

<ExportDialog @bind-Visible="showExport"
              Value="exportDiaries">
</ExportDialog>